<template>
    <div>
        <div>
            <span style="font-size: 16px">审核>>报价</span>
        </div>
         <div style="width: 400px;display: flex;justify-content: space-between">
            <a-input  placeholder="商品名称" v-model="queryCondition.commodityName" style="width: 150px">
            </a-input>
            <a-input  placeholder="采购截止时间" type=date v-model="queryCondition.deadTime" style="width: 150px">
            </a-input>
            <a-button @click="onSearch" icon="search" style="width:20%;background-color:dodgerblue;color: white">
                查询
            </a-button>
            <!-- <a-button @click="test" style="width:65px;background-color:dodgerblue;color: white">测试</a-button> -->
            <br /><br />
        </div>
        <a-table 
            :columns="columns" 
            :data-source="purchaseList"
            :loading="loading" 
            :pagination="pagination" 
            :current="pagination.current" 
            @change="tableChange"   
            class="components-table-demo-nested"
        >
            <a-table
                    slot="expandedRowRender"
                    slot-scope="record, index, indent, expanded"
                    :columns="innerColumns"
                    :data-source="record.quotationList"
                    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            >
                <template slot="purchasingNum" slot-scope="text, record" >
                    <a-input :value="record.purchasingNum" style="width: 20%" @change="e => onChange(e.target.value, record)"/>
                </template>
            </a-table>
        </a-table>
        <a-button type="primary"  style="width: 65px" @click="choose">确定</a-button>
    </div>
</template>
<script>
    const columns = [
        {
            title: '采购流水号',
            dataIndex: 'purchasingPlanSeq',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'purchasingPlanSeq' },
        },
        {
            title: '商品名称',
            dataIndex: 'commodityName',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'commodityName' },
        },
        {
            title: '商品类型',
            dataIndex: 'commodityType',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'commodityType' },
        },
        {
            title: '商品规格',
            dataIndex: 'commoditySize',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'commoditySize' },
        },
        {
            title: '采购数量',
            dataIndex: 'purchasingPlanNum',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'purchasingPlanNum' },
        },
        {
            title: '采购时间',
            dataIndex: 'purchasingPlanDeadlineStr',
            width: '15%',
            align: 'center',
            scopedSlots: { customRender: 'purchasingPlanDeadlineStr' },
        }];
    const innerColumns = [
        { title: '供应商', dataIndex: 'supplierName', align: 'center', },
        { title: '报价单价', dataIndex: 'quotationPrice', align: 'center', },
        { title: '报价数量', dataIndex: 'quotationNum',  align: 'center', },
        {title: '采购数量', dataIndex: 'purchasingNum', key: 'purchasingNum',align: 'center',scopedSlots: { customRender: 'purchasingNum' }},
        // {title: '选择商家', dataIndex: 'operation',  align: 'center',scopedSlots: { customRender: 'operation' }},
    ];
    import * as quotationList from '@/services/purchasing/quotation.js'
    export default {
        data() {
            return {
                purchaseList:[],
                columns,
                innerColumns,
                selectedRowKeys: [], // Check here to configure the default column
                quotations:[],
                queryCondition:{commodityName: '',deadTime: ''},
                flag:false,
                loading: false,
                pagination: {
                    total: 0,
                    current: 1,
                    defaultPageSize: 4,
                    showSizeChanger: true,
                    pageSizeOptions: ['5', '15', '30', '50']
                }
            };
        },
        methods:{
            tableChange (e) {
                this.pagination.current = e.current;
            },
            async onSearch() {
                 console.log(this.queryCondition.deadTime);
                let resp = await quotationList.queryPurchaseList(this.queryCondition);
                this.purchaseList = resp;
            },
            onSelectChange(selectedRowKeys,record) {
                this.quotations=[];
                console.log('selectedRowKeys changed: ', selectedRowKeys);
                this.selectedRowKeys = selectedRowKeys;
                for (let i = 0; i < this.purchaseList.length; i++) {
                    for (let j = 0; j < this.purchaseList[i].quotationList.length; j++) {
                        for(let t = 0; t<this.selectedRowKeys.length;t++) {
                            if (this.purchaseList[i].quotationList[j].key === this.selectedRowKeys[t]) {
                                this.quotations.push(this.purchaseList[i].quotationList[j]);
                            }
                        }
                    }
                }
                console.log(this.quotations);
            },
            onChange(value, record){
                const reg = /^-?[0-9]*(\.[0-9]*)?$/;
                if (!reg.test(value)) {
                    this.$message.error('请填写数字', 3,);
                    return;
                }
                console.log(value);
                console.log(record.key);
                for(let i = 0;i <this.purchaseList.length;i++){
                    for(let j = 0;j<this.purchaseList[i].quotationList.length;j++){
                       if(this.purchaseList[i].quotationList[j].key === record.key){
                           this.purchaseList[i].quotationList[j].purchasingNum = value;
                       }
                    }
                }

            },
            async choose(){
                let resp;
                for(let i = 0;i<this.quotations.length;i++){
                    if(this.quotations[i].purchasingNum === "" || this.quotations[i].purchasingNum === null){
                        this.$message.error('请填写采购数量', 3,);
                        return;
                    }
                }
                for(let i = 0;i<this.quotations.length;i++){
                    resp = await quotationList.sendQuotation(this.quotations[i]);
                }

                let newArray = this.arrayGroupBy(this.quotations,'purchasingPlanSeq');              
                for(let i = 0;i<newArray.length;i++){
                    let total = 0;
                    let purchasingPlanSeq = '';
                    for (let j = 0; j < newArray[i].length; j++) {
                        total = total + parseInt(newArray[i][j].purchasingNum);
                        purchasingPlanSeq = newArray[i][j].purchasingPlanSeq;
                    }
                    resp = await quotationList.noticePlatform(total,purchasingPlanSeq);
                    
                }
            
                this.purchaseList =  await quotationList.getPurchaseList();
                if(resp === true){
                    this.$message.success('方案采购成功', 3,);
                }
                
                // console.log(resp);
            },
            groupBy(array, f){
                let groups = {};
                array.forEach(function (o) {
                    var group = JSON.stringify(f(o));
                    groups[group] = groups[group] || [];
                    groups[group].push(o);
                });
                return Object.keys(groups).map(function (group) {
                    return groups[group];
                });
            },
            arrayGroupBy(list, groupId){
                let sorted = this.groupBy(list, function (item) {
                    return [item[groupId]];
                 });
                 return sorted;
            },
        },
        async created(){
            this.loading = true;
            this.purchaseList =  await quotationList.getPurchaseList();
            this.loading = false;
            console.log(this.purchaseList);
        }

    };
</script>
<style>

</style>
